<template>
    <div>
      <div class="zhucepwd-box">
        <div class="title-pwd">
            请设置密码
        </div>
        <div class="head-top">
        <input class="username" placeholder="请至少设置密码" v-model="pwd" name="username" :type="mima">
        <van-icon :name="iconname" class="closeeye" @click="change"/>
        </div>
        
        <p class="title">密码强度校验，最少6位，包括至少1个大写字母，1个小写字母，1个数字</p>
        <div class="submit" @click="showPopup" >完成</div>
          <van-popup v-model="show" class="taichu">
          {{msg}}
          </van-popup>
    </div>
    </div>
  </template>
  
  <script>
import axios from 'axios';
//   import axios from 'axios'
  export default {
    name:"zhucepwd-vue",
    data(){
        return {
        pwd:"",
        show: false,
        msg:"",
        mima:"password",
        iconname:"closed-eye",
        flag :true,
        inputtype : "password"
        }
    },
    methods:{
        showPopup() {
            var pPattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,18}$/;
            if(!pPattern.test(this.pwd)){
                this.msg = "密码设置不符合规范"
                 this.show = true
            }else{
                axios.post("/api/user/dofinishregister",`tel=${localStorage.getItem("tel")}&password=${this.pwd}`).then(res=>{
                    if(res.data.code == 200){
                        this.$router.push("/reg");
                        //并移出掉tel
                        localStorage.removeItem("tel")
                    }
                })
            }
      },
      change(){
        if(this.flag){
          this.iconname = "eye-o"
          this.mima = "text"
          this.flag = false
        }else{
          this.iconname = "closed-eye"
          this.mima = "password"
          this.flag = true
        }
    }
    }
  }
  </script>
  
  <style scoped>
 .zhucepwd-box{
    height:15rem;
          background-color: #fff;
          overflow: auto;
 }
.submit{
    width: 95%;
    height: 1.75rem;
    background-color:rgba(234, 115, 115, 0.999);
    text-align: center;
    margin: 0 auto;
    line-height: 1.75rem;
  
    color: white;
    border-radius:1rem;
    margin-top: 1rem;
  }
  .username{
    display: block;
    width: 80%;
    margin: 0 auto;
    height: 2rem;
    border: none;
   border-bottom: 1px solid rgb(189, 187, 187);
   /* color: rgb(206, 206, 206); */
   margin-top: .5rem;

  }
  .taichu{
      width: 6rem;
      height: 1.5rem;
      background-color: white;
      border-radius: .5rem;
      text-align: center;
      line-height: 1.5rem;
      font-size: .6rem;
  }
  .title{
    font-size: .6rem;
  }
  .title-pwd{
    width: 100%;
    height: 5rem;
    text-align: center;
    line-height: 5rem;
  }
  .head-top{
    position: relative;
  }
  .closeeye{
    position: absolute;
    right: 2.95rem;
    top: .75rem;
  }
  </style>